<script setup lang="ts">

</script>

<template>

  <!-- 第一行：固定导航栏 -->
  <header class="container header">
    <div class="column-center">
      <div class="navbar">
        <!-- 左侧导航链接 -->
        <div class="nav-left">
          <div style="line-height: 60px;font-size: 25px;font-weight: bold">绮梦数字创意网</div>
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/about" class="nav-link">关于我们</router-link>
          <router-link to="/study2" class="nav-link">关于我们2</router-link>
          <a href="#" class="nav-link">其他链接</a>
          <!-- 可以添加更多链接 -->
        </div>
        <!-- 右侧功能区 -->
        <div class="nav-right">
          <!-- 搜索框 -->
          <div class="search-box">
            <i class="fas fa-search"></i>
            <input type="text" placeholder="搜索...">
          </div>

          <!-- 消息图标 -->
          <div class="icon-btn">
            <i class="fas fa-bell"></i>
            <span class="notification-badge"></span> <!-- 消息提示小红点 -->
          </div>

          <!-- VIP 标签 -->
          <div class="vip-tag">VIP</div>

          <!-- 用户头像 -->
          <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="user-avatar">
          <div class="vip-tag2">欢迎老板</div>
        </div>
      </div>

    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container main-content">

    <router-view/>

  </main>

  <!-- 页脚备案信息 -->
  <footer class="container footer">
    <div class="column-center" style="display: flex;height: 35px">
      <div class="copyright">© 2023 网站名称 版权所有</div>
      <div class="record-info">备案号：京ICP备12345678号-1</div>
    </div>

  </footer>


    <!-- 页脚 -->
  <footer class="bg-gray-800 text-gray-300 mt-16">
    <div class="container mx-auto px-4 py-12">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 class="text-white text-lg font-semibold mb-4">TechTools</h3>
          <p class="text-sm">用技术工具提升效率，让每个人都能享受技术带来的便利</p>
        </div>
        <div>
          <h4 class="text-white text-sm font-semibold mb-4">快速链接</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition">工具库</a></li>
            <li><a href="#" class="hover:text-white transition">创意对接</a></li>
            <li><a href="#" class="hover:text-white transition">关于我们</a></li>
          </ul>
        </div>
        <div>
          <h4 class="text-white text-sm font-semibold mb-4">联系我们</h4>
          <ul class="space-y-2 text-sm">
            <li><i class="fa fa-envelope-o mr-2"></i> contact@techtools.com</li>
            <li><i class="fa fa-github mr-2"></i> github.com/techtools</li>
          </ul>
        </div>
      </div>
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-sm">
        © 2023 TechTools. 保留所有权利
      </div>
    </div>
  </footer>


</template>

<style scoped lang="less">

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
  /* 使用flex布局实现居中 */
  //display: flex;
  //justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果需要） */
  width: 100%; /* 占满父容器宽度 */
  padding: 0px 10px; /* 可选：添加内边距 */
  /* 可选：添加边框容器背景以便观察 */
  background-color: #f0f0f0;
}

.column-center {
  padding: 0px 10px; /* 可选：添加内边距 */
  background-color: pink;
  width: 100%;
  //max-width: 1760px;
  min-width: 300px;
  /* 高度可以根据需要设置 */
  /* 文本居中 */
  color: white;
  //display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto; /* 水平居中，关键！ */
  font-size: 1.2rem;
}

.header {
  background-color: palegreen;

  /* 关键：固定定位，脱离文档流，相对于视口定位 */
  position: fixed;
  /* 固定在顶部 */
  top: 0;
  /* 左右拉伸填满屏幕宽度 */
  left: 0;
  right: 0;

  z-index: 9999;


  .navbar {

    display: flex;
    justify-content: space-between; /* 左右元素分开，自动填充空间 */
    align-items: center; /* 垂直居中对齐 */
    padding: 0 20px; /* 左右内边距 */
    height: 60px; /* 导航栏高度 */
    background-color: #dda8a8;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影增加层次感 */
  }

  /* 左侧导航链接容器 */

  .nav-left {
    display: flex;
    gap: 24px; /* 链接之间的间距 */
  }

  /* 导航链接样式 */

  .nav-link {
    color: #333;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s;
    line-height: 60px;

  }

  .nav-link:hover {
    color: #4a90e2; /*  hover 时变色 */
  }

  /* 右侧功能区容器 */

  .nav-right {
    display: flex;
    align-items: center;
    gap: 20px; /* 功能按钮之间的间距 */
  }

  /* 搜索框样式 */

  .search-box {
    position: relative;
  }

  .search-box input {
    padding: 6px 12px 6px 32px; /* 左侧留空间放图标 */
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
    transition: border-color 0.3s;
  }

  .search-box input:focus {
    border-color: #4a90e2;
  }

  .search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
  }

  /* 消息图标样式 */

  .icon-btn {
    color: #333;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s;
    position: relative;
  }

  .icon-btn:hover {
    color: #4a90e2;
  }

  /* 消息提示小红点 */

  .notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    background-color: #ff4d4f;
    border-radius: 50%;
  }

  /* VIP 标签样式 */

  .vip-tag {
    color: #ff9500;
    font-weight: 500;
    font-size: 14px;
    padding: 2px 8px;
    border: 1px solid #ff9500;
    border-radius: 12px;
  }

  /* 用户头像样式 */

  .user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover; /* 图片裁剪适应圆形 */
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
  }

  .user-avatar:hover {
    border-color: #4a90e2;
  }
}

.main-content {
  background-color: bisque;
  margin-top: 60px;

}

.footer {
  background-color: lavenderblush;
  border-top: 1px solid #ebebeb;
}


/* 大屏设备（桌面显示器，1920px以上） */
@media (min-width: 1920px) {
  .column-center {
    max-width: 1860px; /* 超宽屏时最大1760px */
  }
}

/* 中大屏设备（笔记本/平板横屏，1200px-1919px） */
@media (min-width: 1200px) and (max-width: 1919px) {
  .column-center {
    max-width: 1600px; /* 中等宽度屏幕最大1200px */
    width: 90%;
  }
}

/* 平板竖屏/小屏设备（768px-1199px） */
@media (min-width: 768px) and (max-width: 1199px) {
  .column-center {
    max-width: 1100px; /* 平板设备最大900px */
    width: 90%; /* 适当增加占比，避免过窄 */
  }
}

/* 手机横屏（576px-767px） */
@media (min-width: 576px) and (max-width: 767px) {
  .column-center {
    max-width: 600px; /* 手机横屏最大600px */
    width: 95%; /* 占比更高，利用有限空间 */
  }
}

/* 手机竖屏（小于576px） */
@media (max-width: 575px) {
  .column-center {
    max-width: 100%; /* 小屏时不限制最大宽度，充分利用屏幕 */
    width: 95%;
    font-size: 1rem; /* 小屏缩小字体，避免溢出 */
  }
}

</style>